<template>
  <div class="mod-demo-echarts">
    <el-row :gutter="20">
      
      <el-col :span="6">
       <el-card class="box-card">
          <div slot="header" class="clearfix">
          <span>范志勇</span>
          </div>
          <div class="text item">
            <p><span class="card-big-font">5.21%</span></p>
            <p style="font-size: 15px;padding-top: 10px;">
                支出：
            <span class="card-span-color"><span>800元</span>
                 <i class="el-icon-s-marketing"></i></span>
              </p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
       <el-card class="box-card">
          <div slot="header" class="clearfix">
          <span>贺志成</span>
          </div>
          <div class="text item">
            <p><span class="card-big-font">73.85%</span></p>
            <p style="font-size: 15px;padding-top: 10px;">
                支出：
            <span class="card-span-color"><span>11,333元</span>
                 <i class="el-icon-s-marketing"></i></span>
              </p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
       <el-card class="box-card">
          <div slot="header" class="clearfix">
          <span>刘水良</span>
          </div>
          <div class="text item">
            <p><span class="card-big-font">10.89%</span></p>
            <p style="font-size: 15px;padding-top: 10px;">
                支出：
            <span class="card-span-color"><span>1,671元</span>
                 <i class="el-icon-s-marketing"></i></span>
              </p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
       <el-card class="box-card">
          <div slot="header" class="clearfix">
          <span>刘继新</span>
          </div>
          <div class="text item">
            <p><span class="card-big-font">10.05%</span></p>
            <p style="font-size: 15px;padding-top: 10px;">
                支出：
            <span class="card-span-color"><span>1,543元</span>
                 <i class="el-icon-s-marketing"></i></span>
              </p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">

      <el-col :span="12">
        <el-card>
          <div id="charcosttype" class="chart-box"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div id="charcostamount" class="chart-box" ></div>
        </el-card>
      </el-col>
      
    </el-row>
  </div>
</template>

<script>
  export default {
    data () {
      return {
       charcosttypeline:null,
       charcostamountline:null
      }
    },
    mounted () {
      this.initChartCosttype(),
      this.initChartCostAmount()
    },
    activated () {
      
    },
    methods: {
      initChartCosttype() {
        let option = {
          title: {
            text: '按类型成本',
            x:'center'
          },
          xAxis: {
          type: 'category',
          data: ['人工费', '交通费', '餐饮费', '加盟费', '住宿费']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [2600, 1243, 420, 10000, 1084],
            type: 'line'
          }]
        };
        this.charcosttypeline = this.$echarts.init(document.getElementById('charcosttype'))
        this.charcosttypeline.setOption(option)
      },
      initChartCostAmount(){
        let option = {
          title : {
              text: '按人次成本',
              x:'center'
          },
          tooltip : {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
              type: 'scroll',
              orient: 'vertical',
              right: 10,
              top: 20,
              bottom: 20,
          },
          series : [
              {
                  name: '姓名',
                  type: 'pie',
                  radius : '55%',
                  center: ['40%', '50%'],
                  data: [{
                    "name":"刘继新",
                    "value":1543
                  },{
                    "name":"刘水良",
                    "value":1671
                  },{
                    "name":"范志勇",
                    "value":800
                  },{
                    "name":"贺志成",
                    "value":11333
                  }],
                  itemStyle: {
                      emphasis: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  }
              }
          ]
        };
        this.charcostamountline = this.$echarts.init(document.getElementById('charcostamount'))
        this.charcostamountline.setOption(option)
      }
    }
  }
</script>

<style lang="scss">
  .mod-demo-echarts {

    > .el-alert {
      margin-bottom: 10px;
    }

    > .el-row {
      margin-top: -10px;
      margin-bottom: -10px;

      .el-col {
        padding-top: 10px;
        padding-bottom: 10px;
      }

    }
    .chart-box {
      min-height: 300px;
    }

    .clearfix {
      color: #8f8a8a;
      font-size: 20px;
    }
    .card-big-font {
      color: #7a53a7;
      font-size: 24px;
    }

    .card-span-color{
      color: #244bce;
      font-size: 22px;
      float: right;
    }


  }
</style>
